<template>
	<view>
		<view class="row-between" style="padding: 30upx;">
			<view class="row-div time-select-view" @click="showPicker = true">
				<text>{{yearMonthText}}</text>
				<image src="/static/assets/open.png" mode=""></image>
			</view>
			<view class="text-view">
				<!-- <view style="margin-bottom: 20upx;"><text>收：</text><text>{{income || 0}}</text></view> -->
				<!-- <view><text>支：</text><text>{{expend || 0}}</text></view> -->
			</view>
		</view>

		<!-- 明细 列表 -->
		<view class="list-view">
			<view class="row-between list-item" v-for="item in dataList" :key="item.time">
				<view>
					<view style="font-size: 26upx;color: #333333;margin-bottom: 22upx;">{{item.des}}</view>
					<view style="font-size: 22upx;color: #999999;">{{item.time}}</view>
				</view>
				<view class="positive-number">
					<text :style="{'color': item.ioFlag == 1 ? '#333333' : '#FE5E49'}">{{item.ioFlag == 1 ? '-' : '+'}}{{item.amount}}</text>
					<text :style="{'font-size': '24upx', 'color': item.ioFlag == 1 ? '#333333' : '#FE5E49'}">.{{item.decimals || '00'}}</text>
				</view>
			</view>
		</view>
		<g-empty v-if="!dataList.length"></g-empty>
		<view style="height: 60px;"></view>
		<picker-view-time v-if="showPicker" @cancel="showPicker = false" @confirm="timeConfirm"></picker-view-time>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker: false,
				year: null,
				month: null,
				yearMonthText: '本月',
				dateType: 20,
				page: 1,
				dataList: [],
				expend: null, // 支出
				income: null, // 收入
				type: ''
			}
		},
		onLoad() {
			let data = new Date()
			this.year = data.getFullYear()
			this.month = data.getMonth() + 1
		},
		created() {
			this.getRequest()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.dataList = [];
			this.getRequest()
		},
		onReachBottom() {
			this.page += 1;
			this.getRequest()
		},
		methods: {
			timeConfirm(e) {
				this.month = e.month || null;
				this.year = e.year || null;
				this.page = 1;
				this.dataList = []
				this.yearMonthText = this.month && this.year ? (this.dateType = 20, `${this.year}年${this.month}月`) : this.year ? (
					this.dateType = 10, `${this.year}年`) : ''
				this.getRequest()
			},
			timeFormat(time) {
				let data = new Date(time - 0)
				let month = data.getMonth() + 1 > 10 ? data.getMonth() + 1 : `0${data.getMonth() + 1}`
				let day = data.getDate() >= 10 ? data.getDate() : `0${data.getDate()}`
				let hours = data.getHours() >= 10 ? data.getHours() : `0${data.getHours()}`
				let minutes = data.getMinutes() >= 10 ? data.getMinutes() : `0${data.getMinutes()}`
				return `${data.getFullYear()}.${month}.${day} ${hours}:${minutes}`
			},
			async getRequest() {
				this.$api.showLoading();
				return await this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/totalDetail',
					method: "POST",
					data: {
						pageNum: this.page, //页码
						pageSize: 10, //每页长度
						type: '30', //类型 10 发行总量 20 销毁总量 30 权益分收账记录 40 权益分兑换记录	
						year: this.year,
						month: this.dateType == 20 ? this.month : '',
						dateType: this.dateType
					},
					success: (res) => {
						console.log("totalDetail", res)
						if (res.data.success) {
							res.data.response.resultFormPageableList.results.forEach(item => {
								item.time = this.timeFormat(item.date)
							})
							this.dataList = this.dataList.concat(res.data.response.resultFormPageableList.results)
							this.income = res.data.response.totalAmount
						}
					},
					complate: () => (uni.hideLoading(), uni.stopPullDownRefresh())
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.time-select-view {
		padding: 5upx 20upx;
		background: #FFFFFF;
		border-radius: 25upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		image {
			width: 14upx;
			height: 7upx;
			margin-left: 18upx;
		}
	}

	.text-view {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.list-view {
		padding: 0upx 30upx;
		background: #FFFFFF;
		border-radius: 16upx;
		font-family: PingFang SC;
		font-weight: 500;

		.list-item {
			padding: 40upx 0upx;
			border-top: 1upx solid #EEEEEE;

			&:first-of-type {
				border-top: none;
			}
		}

		.positive-number {
			font-size: 34upx;
			font-weight: bold;
			color: #FE5E49;
		}

		.negative {
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
